import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import PageLoading from '@/components/PageLoading';
import {
  Card,
  Button,
  Icon,
  Modal,
  message,
  Form,
  Input,
  Checkbox,
  Col,
  Row,
  Tag,
  Select,
} from 'antd';
import { knowledgeDialogNodeInfo } from '@/services/dialog';
import UserSession from '@/UserSession';

const { Option } = Select;
const Item = React.lazy(() => import('./item'));
const formItemLayout = {
  labelCol: { span: 1 },
  wrapperCol: { span: 20 },
};

@connect(({ collectSlot, loading }) => ({
  collectSlot,
  loading: loading.effects['collectSlot/fetchSlot'],
}))
class UserReply extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dialogSlots: [],
      nodeId: props.nodeId,
      stage: props.stage,
      dialogId: props.dialogId, // 多轮对话id
      data: {
        replies: [],
        caseType: 'user_reply',
      },
    };
  }

  componentDidMount() {
    this.fetchSlot();
  }

  fetchSlot = async () => {
    const { dispatch } = this.props;
    const { dialogId, nodeId, stage } = this.state;
    let { data, dialogSlots } = this.state;
    if (UserSession.isSystemKnowledge()) { 
			let res = await knowledgeDialogNodeInfo({
        dialogId,
				nodeId,
				nodeType: stage,
				field: "data",
      });
      data = res.dialogStage.data;
      dialogSlots = res.dialogSlots;
      if (!data || !data.replies) {
        data = {
          replies: [],
          caseType: "user_reply",
        };
      }
      if (!dialogSlots) {
        dialogSlots = [];
      }
      this.setState({
        dialogSlots,
        data,
      });
    } else {
      dispatch({
        type: "collectSlot/fetchSlot",
        payload: {
          dialogId,
          nodeId,
          stage,
          field: "data",
          urlPrefix: UserSession.isSystemKnowledge() ? 1 : null,
        },
        callback: (res) => {
          data = res.dialogStage.data;
          dialogSlots = res.dialogSlots;
          if (!data || !data.replies) {
            data = {
              replies: [],
              caseType: "user_reply",
            };
          }
          if (!dialogSlots) {
            dialogSlots = [];
          }
          this.setState({
            dialogSlots,
            data,
          });
        },
      });
    }
    
  };

  fixCaseArr = arr => {
    let { data } = this.state;
    data.replies = arr;
    this.setState({
      data,
    });
  };

  saveSlotCheck = () => {
    const { dispatch, closeDrawer } = this.props;
    const { dialogId, nodeId, data } = this.state;
    dispatch({
      type: 'collectSlot/saveSlot',
      payload: {
        field: 'data',
        id: `${dialogId}-${nodeId}`,
        data,
        stage: 'case',
      },
      callback: res => {
        message.info('保存成功');
        closeDrawer();
      },
    });
  };

  render() {
    const { dialogSlots, data } = this.state;

    return (
      <GridContent>
        <Suspense fallback={<PageLoading />}>
          <Col style={{ paddingLeft: 25 }}>
            <Item
              caseArr={data.replies}
              dialogSlots={dialogSlots}
              upDateCase={val => this.fixCaseArr(val)}
              upNewData={val => this.fixCaseArr(val)}
            />
            <Button
              type="primary"
              htmlType="button"
              onClick={() => this.saveSlotCheck()}
              style={{ marginTop: 20 }}
              disabled={UserSession.isSystemKnowledge()}
            >
              保存
            </Button>
          </Col>
        </Suspense>
      </GridContent>
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(Form.create()(UserReply));
